<template>
  <div class="code">
    <div class="header">
      <table>
        <tr>
          <td colspan="12" style="position: absolute; right: 30px">
            <el-button
              type="success"
              size="small"
              @click="addExCode()"
              icon="el-icon-plus"
            >
              新建兑换码
            </el-button>
          </td>
        </tr>
      </table>
    </div>
    <div class="content">
      <el-main style="margin-top: 60px" v-loading="loading">
        <el-table
          class="table"
          border
          :header-cell-style="{
            color: '#333',
            fontFamily: 'MicrosoftYaHeiUI',
            fontWeight: 500,
            fontSize: '16px',
          }"
          :fit="true"
          :data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"
        >
          <el-table-column
            prop="code"
            sortable
            label="兑换码"
          ></el-table-column>
          <el-table-column
            prop="userLimit"
            sortable
            label="可兑换用户数"
          ></el-table-column>
          <el-table-column
            prop="describe"
            sortable
            label="兑换码描述"
          ></el-table-column>
          <el-table-column
            prop="startTime"
            sortable
            :formatter="formatDate"
            label="开始时间"
          ></el-table-column>
          <el-table-column
            prop="endTime"
            sortable
            :formatter="formatDate"
            label="结束时间"
          ></el-table-column>
          <el-table-column prop="enabled" sortable label="兑换码状态">
            <template slot-scope="scope">
              <span v-if="scope.row.enabled == false" style="color: red">已禁用</span>
              <span v-if="scope.row.enabled" style="color: green">已启用</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="showExchageCode(scope.row)"
              >查看/编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                v-if="scope.row.enabled"
                @click="Disable(scope.row)"
              >禁用</el-button>
              <el-button
                size="mini"
                v-if="scope.row.enabled == false"
                type="success"
                @click="Enable(scope.row)"
              >启用</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pageNation
          :total="tableData.length"
          :page-size="pageSize"
          @pageChange="pageChange"
          :page_index="currentPage"
        />
      </el-main>
      <ExCodeDialog
        :dialog="dialog"
        :ExCodeForm="ExCodeForm"
        @update="getfileMsg($event)"
      />
    </div>
  </div>
</template>
<script>
import ExCodeDialog from "../../components/gmtool/ExCodeDialog";
import pageNation from "../../components/pagenation/pageNation";
import { formatDate, getTime } from "../../utils/index";
export default {
  name: "ExchangeCode",
  components: { ExCodeDialog, pageNation },
  data() {
    return {
      formatDate: formatDate,
      loading: false,
      ExCodeForm: {
        code: "",
        startTime: "",
        endTime: "",
        userLimit: "",
        describe: "",
        awards: [
          {
            goodsNum: "",
            goodsId: "",
          },
        ],
      },
      tableData: [],
      dialog: {
        show: false,
        title: "",
        option: "edit",
      },
      currentPage: 1,
      pageSize: 10,
    };
  },
  mounted() {
    this.getCodeMsg();
  },
  methods: {
    //获取激活码信息
    getCodeMsg() {
      this.loading = true;
      this.$http.get("/api/gmtool/getCode").then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.result;
          this.loading = false;
        } else {
          this.$message({ type: "warning", message: "没有对应的数据" });
          this.loading = false;
        }
      });
    },
    //查看兑换码信息
    showExchageCode(row) {
      this.$http.post("/api/gmtool/getCodeId", {
          code: row.code,
          user_actions: "查看兑换码信息",
          date: getTime(new Date()),
      }).then((res) => {
          let startTime = "";
          let endTime = "";
          if (res.data.code == 200) {
            res.data.result.forEach((item) => {
              if (item.startTime == 0) {
                startTime = "";
              } else {
                startTime = item.startTime * 1000;
              }
              if (item.endTime == 0) {
                endTime = "";
              } else {
                endTime = item.endTime * 1000;
              }
              this.ExCodeForm.code = item.code;
              this.ExCodeForm.describe = item.describe;
              this.ExCodeForm.startTime = startTime;
              this.ExCodeForm.endTime = endTime;
              this.ExCodeForm.userLimit = item.userLimit;
              if (item.awards.length == 0) {
                this.ExCodeForm.awards = [
                  {
                    goodsNum: "",
                    goodsId: "",
                  },
                ];
              } else {
                this.ExCodeForm.awards = item.awards;
              }
            });
            this.dialog = {
              show: true,
              title: "查看/编辑兑换码",
              option: "edit",
              enable:"false"
            };
          }
        });
    },
    //禁用兑换码
    Disable(row) {
      this.$confirm("确定禁用服务器吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          this.$http.post("/api/gmtool/disableCode", {
              code: row.code,
              user_actions: `禁用${row.code}兑换码信息`,
              date: getTime(new Date()),
          }).then((res) => {
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                this.getCodeMsg();
              }
         });
      }).catch(() => {
        return;
      });
    },
    //启用兑换码
    Enable(row) {
      this.$confirm("确定启用服务器吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          this.$http.post("/api/gmtool/enableCode", {
              code: row.code,
              user_actions: `启用${row.code}兑换码信息`,
              date: getTime(new Date()),
          }).then((res) => {
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                this.getCodeMsg();
              }
          });
      }).catch(() => {
          return;
      });
    },
    //分页
    pageChange(item) {
      this.currentPage = item.page_index;
      this.pageSize = item.page_limit;
    },
    //新增兑换码
    addExCode() {
      this.dialog = {
        show: true,
        title: "新建兑换码",
        option: "add",
      };
      this.ExCodeForm.code = "",
      this.ExCodeForm.startTime = "",
      this.ExCodeForm.endTime = "",
      this.ExCodeForm.userLimit = "",
      this.ExCodeForm.describe = "",
      this.ExCodeForm.awards = [
          {
            goodsNum: "",
            goodsId: "",
          },
      ];
    },
    //编辑和添加兑换码操作
    getfileMsg(code) {
      if(this.dialog.option=='add'){
        this.$http.post(`/api/gmtool/addCode`, {
          code: code.code,
          describe: code.describe,
          awards: code.awards,
          startTime: code.startTime / 1000,
          endTime: code.endTime / 1000,
          userLimit: code.userLimit,
          user_actions: `新增兑换码信息`,
          date: getTime(new Date()),
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
            this.getCodeMsg();
          } else {
            this.$message({ type: "warning", message: res.data.msg });
          }
        });
      }else{
        this.$http.post(`/api/gmtool/updCode/${code.code}`, {
          code: code.code,
          describe: code.describe,
          awards: code.awards,
          startTime: code.startTime / 1000,
          endTime: code.endTime / 1000,
          userLimit: code.userLimit,
          user_actions: `编辑兑换码信息`,
          date: getTime(new Date()),
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success(res.data.msg);
            this.getCodeMsg();
          } else {
            this.$message({ type: "warning", message: res.data.msg });
            return;
          }
        });
      }
    },
  },
};
</script>
<style scoped>
.code {
  width: 100%;
  height: auto;
  background-color: #fff;
}
.code td {
  padding: 18px;
  font-size: 14px;
  display: flex;
  float: left;
}
</style>